import dayjs from 'dayjs'
export interface MenuItem {
  title: string
  tailTitle?: string
  icon: string
  path?: string
  fullPath?: string
  children?: Menu
  domId?: string
  token?: boolean
  className?: string
  modalQuery?: { [k: string]: any }
  type?: 'sheet'
  sheetTitle?: string
  value?: any
  change?: (val: any) => void
  fixtureCount?: number
  /** 有path，不会执行 */
  callBack?: () => void
  useCloudImg?: boolean
  separate?: boolean
  sptToken?: boolean
  /** 活动菜单加的方法，比path优先，不会触发path */
  backFun?: () => void
  accordHeadClick?: () => void
  promo_id?: string

}

export type Menu = Array<MenuItem>

export function useApiMenuData() {
  // const { openWalletDialog } = useWalletDialog()
  // const { openSafeDialog } = useSafeDialog()
  // const { openStatisticsDialog } = useStatisticsDialog()
  // const { openLogoutDialog } = useLogoutDialog()
  // const {
  //   openRightSidebar,
  //   closeRightSidebar,
  //   rightIsExpand,
  //   currentRightSidebarContent,
  // } = useRightSidebar()
  const {
    activitySidebar,
  } = useActivityMenu()
  const appStore = useAppStore()
  const { t } = useI18n()
  const { isLogin, userInfo } = storeToRefs(appStore)
  const { casinoSidebar: casinoGameList } = storeToRefs(useCasinoStore())
  const languageStore = useLanguageStore()
  const { userLanguage, AllLanguages } = storeToRefs(languageStore)
  const { langChoosed, brandConfig } = storeToRefs(useBrandStore())
  const { openService } = useService()
  const { rebateAutomatic } = useVipInfo()
  const { notificationsCount } = useNotificationState()
  const { locale } = useI18n()
  const route = useRoute()
  // const { openRealTimeRebateDialog } = useDialogRealTimeRebate()
  const router = useRouter()
  // const { closeLeftSidebar, openLeftSidebar, leftIsExpand } = useLeftSidebar()
  const menuStore = useMenuStore()
  // const { isMobile, isLessThanLg, appContentWidth } = storeToRefs(useWindowStore())
const countTotal = computed(() => {
  return Number(notificationsCount.value?.notification_count || 0) + Number(notificationsCount.value?.station_count || 0) + Number(notificationsCount.value?.notice_count || 0) + Number(notificationsCount.value?.reward_count || 0)
})
  // casino
  const casinoMenu = computed<Menu>(() => [
    {
      title: t('favorites'),
      path: '/favorites',
      icon: 'menu-star',
      children: [],
      domId: '',
      token: true,
    },
    {
      title: t('recent_game_record'),
      path: '/casino',
      icon: 'menu-game-record',
      children: [],
      domId: '',
      token: true,
    },
    {
      title: t('bet_record'),
      path: '/bets?type=casino',
      icon: 'menu-my-bet',
      children: [],
      domId: 'bets',
      token: true,
    },
    isLogin.value && rebateAutomatic.value && +rebateAutomatic.value.automatic === 3 && userInfo.value && +userInfo.value.rebate_state === 1 && +userInfo.value.bonus_state === 1
      ? {
        domId: 'realTimeRebateDomId',
        path: '/record/betrayal',
        children: [],
        token: true,
        icon: 'menu-rebate',
        title: t('rebate_center'),
        // callBack: () => openRealTimeRebateDialog(),
      }
      : undefined,
  ].filter(m => !!m))

  const isRouteSports = computed(() => route.name?.toString().includes('sports'))

  // const getActiveShown = computed(() => {
  //   return (shown: string) => rightIsExpand.value
  //     && shown === currentRightSidebarContent.value
  // })
  const staticMenu1 = computed(() => <Menu>[
    isLogin.value
      ? {
        title: t('profile'),
        path: '',
        icon: 'menu-profile',
        children: [
          {
            title: t('wallet'),
            path: '',
            icon: 'menu-wallet',
            callBack: () => {
              // openWalletDialog()
            },
          },
          globalInitMap.allBrandInfo?.base?.interest === 1
            ? {
              title: t('interest-app'),
              path: '/wallet/vault',
              icon: 'menu-interest',
              // callBack: () => openSafeDialog(),
            }
            : undefined,
          {
            title: 'VIP',
            path: '/vip/vip-bonus',
            icon: 'menu-vip',
          },
          {
            title: t('statics-data'),
            path: '/record/statistics',
            icon: 'menu-statics',
            // callBack: () => openStatisticsDialog(),
          },
          {
            id: 7,
            icon: 'menu-record',
            title: t('trade-record'),
            name: 'transactions',
            path: '/trade-record',
          },
          {

            id: 8,
            icon: 'menu-bet-record',
            title: t('bet-record'),
            name: 'my-bets',
            path: `/bets?type=${isRouteSports.value ? 'sports' : 'casino'}`,
          },
          {
            title: t('notify'),
            path: '/notification',
            icon: 'menu-notify',
            fixtureCount: countTotal,
          },
          { title: t('setting'), path: '/settings', icon: 'menu-setting' },
          {
            title: t('sign-out'),
            path: '',
            icon: 'menu-sign-out',
            // callBack: () => openLogoutDialog(),
            separate: true
          },
        ].filter(i => i !== undefined),
        domId: 'static-menu-user',
      }
      : undefined,
    {
      title: t('promo'),
      path: activitySidebar.value && activitySidebar.value.length > 1 ? '' : '/promotion',
      icon: 'menu-promo',
      children: activitySidebar.value && activitySidebar.value.length > 1 ? activitySidebar.value : [],
      domId: 'static-menu-promotion',
      accordHeadClick: () => {
        if (activitySidebar.value && activitySidebar.value.length > 1) {
          console.log('pro', activitySidebar.value)
        }
        else {
          router.push('/promotion')
        }
      },
    },
    {
      title: t('affiliate'),
      path: '/affiliate-program',
      icon: 'menu-union',
      children: [],
      domId: '',
    },
    {
      title: `${t('vip_club')}`,
      path: '/vip-club',
      icon: 'menu-vip',
      children: [],
      domId: '',
    },
  ].filter(i => i !== void 0))
  const staticMenu2 = computed(() => <Menu>[
    {
      title: t('notifications'),
      path: '/notification',
      icon: 'menu-notify',
      children: [],
      domId: '',
      fixtureCount: countTotal,
    },
    {
      title: t('online_support'),
      path: '/support',
      icon: 'menu-support',
      children: [],
      domId: '',
      callBack: () => openService({ isFootBar: false, needDeal: true }),
    },
    // langChoosed.value,
    brandConfig.value?.base?.lang.f === 1
      ? undefined
      : {
        title: `${t('language')}`,
        path: '',
        icon: 'menu-language',
        type: 'sheet',
        tailTitle: `${AllLanguages.value.filter(a => a.value === userLanguage.value)[0]?.title}`,
        sheetTitle: t('choose_language'),
        value: userLanguage.value,
        change: (val: EnumLanguageKeys) => languageStore.changeLanguage(val),
        children: brandConfig.value?.base?.lang.f === 1 ? [] : AllLanguages.value,
        domId: 'static-menu-language',
      },
    {
      title: dayjs(dayjs().format('YYYY-MM-DD HH:mm').toString()).tz(useLanguageStore().currentLangZone).format('YYYY-MM-DD HH:mm'),
      icon: 'menu-date',
      className: 'current_language_area_time',
      children: [],
      domId: '',
    },
  ].filter(f => f !== undefined))

  function menuItemClick(item: MenuItem) {
    if (item.domId)
      Local.set(STORAGE_MENU_EXPAND_DOMID, item.domId)
    if (item.backFun) {
      item.backFun()
    }
    else if (item.path && item.path.length) {
      router.push(`/${locale.value}${replaceSportsPlatId(item.path!)}`)
      menuStore.setSideBigActiveMenu(item.path)
    }
    else if (item.children && item.children.length) {
      // openLeftSidebar()
    }
    else if (item.callBack) {
      item.callBack()
    }
    // else if (item.modalQuery) {
    // if (isMobile.value)
    //   closeLeftSidebar()
    // router.push({
    //   path: route.path,
    //   query: { ...route.query, ...item.modalQuery },
    // })
    // }
  }

  return {
    casinoMenu,
    casinoGameList,
    staticMenu1,
    staticMenu2,
    menuItemClick,
  }
}
